/**格栏图标 */
<template>
    <div class="icons">
    <swiper v-bind:options="swiperOption" >
        <swiper-slide v-for="(page,index) of pages" v-bind:key="index">            
        <div class="icon" v-for="item in page" v-bind:key="item.id">
            <div class="icon-img">
                <img class="icon-img-cont" v-bind:src="item.url" />
            </div>      
            <p class="icon-desc">{{item.text}}</p>          
        </div>
        </swiper-slide>
    </swiper>
    </div>
</template>
<script>
export default {
    data(){
        return{
            swiperOption:{autoplay:false},
            iconList:[
                {id:'001',url:require('../../../assets/imgadv/ion (1).png'),text:'夏日玩水夏日玩水'},
                {id:'002',url:require('../../../assets/imgadv/ion (2).png'),text:'全部玩乐'},
                {id:'003',url:require('../../../assets/imgadv/ion (3).png'),text:'文化古迹'},
                {id:'004',url:require('../../../assets/imgadv/ion (4).png'),text:'全部玩乐'},
                {id:'005',url:require('../../../assets/imgadv/ion (5).png'),text:'动植物园'},
                {id:'006',url:require('../../../assets/imgadv/ion (6).png'),text:'景点门票'},
                {id:'007',url:require('../../../assets/imgadv/ion (7).png'),text:'北京必游'},
                {id:'008',url:require('../../../assets/imgadv/ion (8).png'),text:'汽车票'},
                {id:'009',url:require('../../../assets/imgadv/ion (9).png'),text:'故宫'},
                {id:'010',url:require('../../../assets/imgadv/ion (10).png'),text:'全部玩乐'}
            ]
        }
    },
    computed:{
        pages(){
            const pages = []
            this.iconList.forEach((item,index)=>{
                const page = Math.floor(index/8)
                if(!pages[page]){pages[page]=[]}
                pages[page].push(item)
            })
            return pages
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl'
.icons >>>.swiper-container
    height :0
    padding-bottom:50%
.icons
    width :100%
    overflow :hidden
    height :0
    padding-bottom :50%
    margin-bottom:.1rem
    .icon
        overflow :hidden
        float :left
        width:25%
        height :0
        padding-bottom :25%  
        position :relative
        .icon-img
            position:absolute
            top:0
            left:0
            right:0
            bottom:.44rem
            padding:.1rem
            box-sizing:border-box
            .icon-img-cont
                height :100%
                display:block
                margin :0 auto
        .icon-desc
            position :absolute
            bottom :0
            left :0
            right :0
            height :.44rem
            line-height :.44rem
            color:#333
            text-align :center
            ellipsis()

</style>
